<template>
  <div class="article-page">
    <nav class="my-nav van-hairline--bottom">
      <a
        href="javascript:;"
        :class="{ active: values.sorter === null }"
        @click="hander(null)"
        >推荐</a
      >
      <a
        href="javascript:;"
        :class="{ active: values.sorter === 'weight_desc' }"
        @click="hander('weight_desc')"
        >最新</a
      >
      <div class="logo"><img src="@/assets/logo.png" alt="" /></div>
    </nav>

    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      success-duration="1000"
      success-text="刷新成功"
      class="article-list"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="太深了,到顶啦~"
        @load="onLoad"
      >
        <!-- 组件上没有事件,因此需要借助native属性识别为事件,否则则为子向父传值
      .native属性能避开使用vue的方法而转为使用原生事件
       -->
        <ArticleItem
          v-for="(item, index) in list"
          :key="index"
          :list="item"
          @click.native="goDetail(item.id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { ArticleApi } from "@/api/user.js";
export default {
  name: "Article",
  data() {
    return {
      list: [],
      values: {
        current: 1,
        pageSize: 10,
        sorter: null,
        // sorter: "weight_desc",
      },
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    async getArticleLsit() {
      //       console.log(this.values);
      const res = await ArticleApi(this.values).catch(() => {});
      if (!res) return this.$toast.fail("登录过期,请重新登录");
      console.log(res);
      if (this.refreshing) {
        this.list = res.data.rows;
      } else {
        this.list = this.list.concat(res.data.rows);
      }
      this.loading = false;
      this.refreshing = false;
    },
    onLoad() {
      if (this.values.current >= 5) {
        this.loading = false;
        this.finished = true;
        return;
      }
      this.getArticleLsit();
      this.values.current += 1;
    },
    onRefresh() {
      // 清空列表数据
      //       console.log(333);
      //       this.finished = false;
      // this.refreshing=true
      this.values.current = 1;
      this.onLoad();
    },
    hander(sorter) {
      this.values.sorter = sorter;
      //       console.log(this.values);
      this.refreshing = true;
      this.onRefresh();
    },
    goDetail(id) {
      console.log(id);
      this.$router.push("/detail/" + id);
    },
  },
  //   created() {
  //     this.getArticleLsit();
  //   },
};
</script>

<style lang="less" scoped>
.article-page {
  margin-bottom: 50px;
  margin-top: 44px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    display: flex;
    align-items: center;
    > a {
      color: #999;
      font-size: 14px;
      line-height: 44px;
      margin-left: 20px;
      position: relative;
      transition: all 0.3s;
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 0;
        height: 2px;
        background: #222;
        transition: all 0.3s;
      }
      &.active {
        color: #222;
        &::after {
          width: 14px;
        }
      }
    }
    .logo {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      > img {
        width: 64px;
        height: 28px;
        display: block;
        margin-right: 10px;
      }
    }
  }
  /*   .my-nav {
    height: 50px;
  }
  .article-list {
    padding: 50px 0;
  } */
}
</style>